<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="img/favicons/hong_favicon.ico">
    <title>纯图版</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/hyaStyless.css">
    <link rel="stylesheet" href="css/sorttable.css">
    <link rel="stylesheet" href="css/joke.css">
    <style>


    </style>
</head>

<body>
    <div id="joke_page">
        <div class="modal-overlay" v-if="queryState"></div>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <div class="mui-title">
                搞笑图集
            </div>
        </header>
        <div class="mui-content">
            <div class="mui-scroll" id="refreshContainer">
                <div class="content content--center">
                    <div class="container">
                        <div class="wrapper">
                            <div id="sortable">
                                <div class="card" v-for="(item, index) in data" :key="index">
                                    <img class="card__picture" :src="item.cdn_img" alt="" @error="showErr">
                                    <!-- <div class="card-infos">
                                            <h2 class="card__title">{{item.screen_name}}</h2>
                                            <p class="card__text">
                                                {{item.text}}
                                            </p>
                                        </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="js/sorttable.js"></script>
    <script>
        // mui.init();
        var joke_data = new Vue({
            el: "#joke_page",
            data: function () {
                return {
                    queryState: true,
                    page: 1,
                    data: [],
                    nextState:false
                }
            },
            created() {
                this.$nextTick(function () {
                    // document.querySelector('#sortable').sortablejs()
                    var that = this;
                    that.getData();
                    // https://www.apiopen.top/meituApi?page=1
                    // https://www.apiopen.top/satinApi?type=1&page=1

                })
            },
            mounted() {
                this.$nextTick(function () {
                    var that = this;
                    document.addEventListener('touchstart', function (event) {
                        // 判断默认行为是否可以被禁用
                        // if (event.cancelable) {
                        //     // 判断默认行为是否已经被禁用
                        //     if (!event.defaultPrevented) {
                        //         event.preventDefault();
                        //     }
                        // }
                        var contentHeight = $('#sortable').height();
                        var lastCardHeight = $('.card:last').height();
                        var documentScrollTop = $(document).scrollTop();
                        if (lastCardHeight + documentScrollTop > contentHeight - 50) {
                            if (!that.nextState) {
                                that.page++;
                                that.nextState = true;
                                that.getData();
                            } else {
                                mui.toast('获取数据中');
                            }
                        }
                    }, false);
                })
            },
            methods: {
                getData: function () {
                    let that = this;
                    $.get('https://www.apiopen.top/satinApi?type=3&page=' + that.page, function (res) {
                        that.queryState = false;
                        that.nextState = false;
                        if (res.code === 200) {
                            res.data.forEach((element, i) => {
                                that.data.push(element);
                            });
                        } else {
                            mui.alert('数据暴乱，点击刷新', function () {
                                location.reload();
                            });
                        }
                    })
                },
                showErr: function (e) {
                    let that = this;
                    // $(e).attr('src','./img/timg.png');
                    $(e).parent().remove();
                }
            }
        })
    </script>
</body>

</html>